<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>系统监控</title>
  <script src="../../js/echarts.min.js"></script>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>

  <style>
    .chart-container {
      height: 300px;
      margin: 10px;
      /* 修改背景色为白色 */
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      /* 添加阴影效果 */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .layui-table {
      margin: 10px 0;
    }

    #refreshBtn {
      margin-bottom: 10px;
    }
    .table-title {
      background-color: #f2f2f2;
      font-weight: bold;
      padding: 10px;
      /*margin-bottom: 10px;*/
      border: 1px solid #e6e6e6;
      border-bottom: none;
    }
    /* 覆盖 layui-layout-body 类的 overflow 属性 */
    .layui-layout-body {
      overflow: auto !important;
    }
  </style>
</head>
<body class="layui-layout-body">

<div class="" style="padding: 20px;">

  <!-- 刷新按钮 -->
<!--  <div class="layui-row">-->
<!--    <div class="layui-col-md12">-->
<!--      <button class="layui-btn" id="refreshBtn">刷新数据</button>-->
<!--    </div>-->
<!--  </div>-->

  <!-- CPU & 内存折线图 -->
  <div class="layui-row">

    <div class="layui-col-md6">
      <div style="font-weight: bold;">CPU 使用率 (%)</div>
      <div id="cpuChart" class="chart-container" style="margin-left: 0"></div>
    </div>
    <div class="layui-col-md6">
      <div style="font-weight: bold;">内存 使用率 (%)</div>
      <div id="memoryChart" class="chart-container" style="margin-right: 0"></div>
    </div>
  </div>

  <!-- 服务器信息表格 -->
  <div class="layui-row" >
    <div class="table-title">服务器信息</div>
    <div class="layui-col-md12">
      <table class="layui-hide" id="serverTable" lay-filter="serverTable"></table>
<!--      <table id="serverTable" lay-filter="serverTable"></table>-->
    </div>
  </div>

  <!-- JVM 信息表格 -->
  <div class="layui-row" style="margin-top: 10px;">
    <div class="table-title">JAVA虚拟机信息</div>
    <div class="layui-col-md12">
      <table class="layui-hide" id="jvmTable" lay-filter="jvmTable"></table>

<!--      <table id="jvmTable" lay-filter="jvmTable"></table>-->
    </div>
  </div>


  <!-- 磁盘使用饼图 -->
  <div class="layui-row chart-container" style="margin-top: 20px;padding: 20px 0;">
    <div class="layui-col-md12" >
      <div id="diskChart1" class="layui-col-md3" style="margin: 0;margin-top: 10px;height: 370px;"></div>
      <div id="diskChart2" class="layui-col-md3" style="margin: 0;margin-top: 10px;height: 370px;"></div>
      <div id="diskChart3" class="layui-col-md3" style="margin: 0;margin-top: 10px;height: 370px;"></div>
      <div id="diskChart4" class="layui-col-md3" style="margin: 0;margin-top: 10px;height: 370px;"></div>
    </div>
  </div>

</div>

<script>

  // /monitor/server/jvm   jvm
  // /monitor/server/sys   服务器新洗
  // /monitor/server/sysFiles   磁盘新洗
  layui.use(['table', 'form', 'layer', 'jquery'], function () {
    var $ = layui.jquery;

    const table = layui.table;
    const form = layui.form;
    const layer = layui.layer;

    // 初始化 ECharts 图表
    const cpuChart = echarts.init(document.getElementById('cpuChart'));
    const memoryChart = echarts.init(document.getElementById('memoryChart'));
    const diskChart1 = echarts.init(document.getElementById('diskChart1'));
    const diskChart2 = echarts.init(document.getElementById('diskChart2'));
    const diskChart3 = echarts.init(document.getElementById('diskChart3'));
    const diskChart4 = echarts.init(document.getElementById('diskChart4'));
    var dataInitCpuChart = [];
    var colorArr = [
      {
        top: '#FF9A22',//黄色
        bottom: '#FFD56E'
      },
      {
        top: '#2750FF',//蓝色
        bottom: '#6AB4FF'
      }
    ]
    // 初始化图表配置
    function initCpuChart() {
      cpuChart.setOption({
        // title: { text: 'CPU 使用率 (%)' },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['核心数','总使用率', '系统使用率', '用户使用率', '等待率', '空闲率']
        },
        xAxis: {
          type: 'category',
          data: [],
          splitLine: {
            show: false  // 隐藏x轴的分割线
          }
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          { name: '核心数', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '总使用率', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '系统使用率', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '用户使用率', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '等待率', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '空闲率', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } }
        ]
      });
    }

    function initMemoryChart() {
      memoryChart.setOption({
        // title: { text: '内存 使用率 (%)' },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['内存总量',' 已用内存', '剩余内存']
        },
        xAxis: {
          type: 'category',
          data: [],
          splitLine: {
            show: false  // 隐藏x轴的分割线
          }
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          { name: '内存总量', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '已用内存', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
          { name: '剩余内存', type: 'line', data: [],symbol: 'none',lineStyle: { width: 3 } },
        ]
      });
    }

    function initDiskChart1() {
      diskChart1.setOption({
        title: { text: '磁盘使用', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: 'C盘' },
            { value: 310, name: 'D盘' },
            { value: 234, name: 'E盘' },
            { value: 135, name: 'F盘' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
    }

    function initDiskChart2() {
      diskChart2.setOption({
        title: { text: '磁盘使用', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: 'C盘' },
            { value: 310, name: 'D盘' },
            { value: 234, name: 'E盘' },
            { value: 135, name: 'F盘' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
    }

    function initDiskChart3() {
      diskChart3.setOption({
        title: { text: '磁盘使用', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: 'C盘' },
            { value: 310, name: 'D盘' },
            { value: 234, name: 'E盘' },
            { value: 135, name: 'F盘' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
    }

    function initDiskChart4() {
      diskChart4.setOption({
        title: { text: '磁盘使用', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: 'C盘' },
            { value: 310, name: 'D盘' },
            { value: 234, name: 'E盘' },
            { value: 135, name: 'F盘' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
    }

    // 服务器信息表格
    function initServerTable() {
      table.render({
        elem: '#serverTable',
        cols: [[
          { field: 'computerName', title: '服务器名称', width: '20%' },
          { field: 'computerIp', title: 'IP地址', width: '20%' },
          { field: 'osName', title: '操作系统', width: '20%' },
          { field: 'osArch', title: '系统架构', width: '20%' },
          { field: 'userDir', title: '项目路径', width: '20%' },
        ]],
        data: []
      });
    }

    // JVM 信息表格
    function initJvmTable() {
      table.render({
        elem: '#jvmTable',
        // height: 200,
        cols: [
          [
            { field: 'total', title: '当前JVM占用的内存总数(M)', width: '20%' },
            { field: 'version', title: '版本', width: '20%' },
            { field: 'free', title: '空闲内存', width: '20%' },
            { field: 'max', title: '最大可用内存总数', width: '20%' },
            { field: 'home', title: '路径' }
          ]
        ],
        data: []
      });
    }

    // 加载提示
    function showLoading() {
      return layer.load(2, { shade: [0.1, '#fff'] });
    }

    function hideLoading(index) {
      layer.close(index);
    }

    // 每秒请求一次 CPU 信息接口
    function fetchCpuData() {
      $.ajax({
        url: '/web/monitor/server/cpu', // 替换为实际的 CPU 信息接口地址
        type: 'GET',
        success: function (response) {
          const usedCpu = response.entity; // 获取 CPU 用户使用率
          var now = new Date();
          var timeLabel = now.toLocaleTimeString();

          // 获取当前图表配置
          var option = cpuChart.getOption();

          // 更新 X 轴时间标签
          option.xAxis[0].data.push(timeLabel);
          if (option.xAxis[0].data.length > 20) {
            option.xAxis[0].data.shift();
          }

          // 更新每个系列的数据
          option.series[0].data.push(usedCpu.cpuNum);
          option.series[1].data.push(usedCpu.total);
          option.series[2].data.push(usedCpu.sys);
          option.series[3].data.push(usedCpu.used);
          option.series[4].data.push(usedCpu.wait);
          option.series[5].data.push(usedCpu.free);

          // 控制数据长度最多保留 20 个点
          option.series.forEach(function (s) {
            if (s.data.length > 20) {
              s.data.shift();
            }
          });

          // 重新设置图表配置
          cpuChart.setOption(option);
        },
        error: function (error) {
          layer.msg('获取 CPU 数据失败，请稍后重试');
        }
      });
    }

    // 每秒请求一次 内存 信息接口
    function fetchMemData() {
      $.ajax({
        url: '/web/monitor/server/mem', // 替换为实际的 CPU 信息接口地址
        type: 'GET',
        success: function (response) {
          const usedMem = response.entity; // 获取 CPU 用户使用率
          var now = new Date();
          var timeLabel = now.toLocaleTimeString();

          // 获取当前图表配置
          var option = memoryChart.getOption();

          // 更新 X 轴时间标签
          option.xAxis[0].data.push(timeLabel);
          if (option.xAxis[0].data.length > 20) {
            option.xAxis[0].data.shift();
          }

          // 更新每个系列的数据
          option.series[0].data.push(usedMem.total);
          option.series[1].data.push(usedMem.used);
          option.series[2].data.push(usedMem.free);

          // 控制数据长度最多保留 20 个点
          option.series.forEach(function (s) {
            if (s.data.length > 20) {
              s.data.shift();
            }
          });

          // 重新设置图表配置
          memoryChart.setOption(option);
        },
        error: function (error) {
          layer.msg('获取 CPU 数据失败，请稍后重试');
        }
      });
    }

    $.ajax({
      url: '/web/monitor/server/sys',
      type: 'GET',
      success: function (response) {
        console.log("response", response)
        if (response.success) {
          table.reload('serverTable', {
            data: [response.entity]
          });
        }
      },
      error: function (error) {
        layer.msg('获取 服务器信息 数据失败，请稍后重试');
      }
    });

    $.ajax({
      url: '/web/monitor/server/jvm',
      type: 'GET',
      success: function (response) {
        console.log("response", response)
        if (response.success) {
          table.reload('jvmTable', {
            data: [response.entity]
          });
        }
      },
      error: function (error) {
        layer.msg('获取 服务器信息 数据失败，请稍后重试');
      }
    });


    $.ajax({
      url: '/web/monitor/server/sysFiles',
      type: 'GET',
      success: function (response) {
        console.log("response", response)
        // 获取当前图表配置
        var option1 = diskChart1.getOption();
        var option2 = diskChart2.getOption();
        var option3 = diskChart3.getOption();
        var option4 = diskChart4.getOption();
        if (response.success) {
          var free1,used1,free2,used2,free3,used3,free4,used4 = null;
          var data = response.entity.map((item, index) => {
            return {
              total:Number(item.total.replace(' GB', '')),
              free:Number(item.free.replace(' GB', '')),
              used:Number(item.used.replace(' GB', ''))
            }
          })

          option1.title = { text: response.entity[0].typeName + '(GB)', left: 'center' };
          option2.title = { text: response.entity[1].typeName + '(GB)', left: 'center' };
          option3.title = { text: response.entity[2].typeName + '(GB)', left: 'center' };
          option4.title = { text: response.entity[3].typeName + '(GB)', left: 'center' };

          // free1 = (data[0].free / data[0].total * 100);
          // used1 = (data[0].used / data[0].total * 100);
          //
          // free2 = (data[1].free / data[1].total * 100);
          // used2 = (data[1].used / data[1].total * 100);
          //
          // free3 = (data[2].free / data[2].total * 100);
          // used3 = (data[2].used / data[2].total * 100);
          //
          // free4 = (data[3].free / data[3].total * 100);
          // used4 = (data[3].used / data[3].total * 100);
          //
          // console.log("free1", free1)
          // console.log("free1", used1)
          //
          // console.log("free2", free2)
          // console.log("used2", used2)

          option1.series[0].data = [{value:data[0].free,name:'剩余内存'},{value: data[0].total,name:'已用内存'}];
          option2.series[0].data = [{value:data[1].free,name:'剩余内存'},{value: data[1].total,name:'已用内存'}];
          option3.series[0].data = [{value:data[2].free,name:'剩余内存'},{value: data[2].total,name:'已用内存'}];
          option4.series[0].data = [{value:data[3].free,name:'剩余内存'},{value: data[3].total,name:'已用内存'}];
          // 重新设置图表配置
          diskChart1.setOption(option1);      // 重新设置图表配置
          diskChart2.setOption(option2);      // 重新设置图表配置
          diskChart3.setOption(option3);      // 重新设置图表配置
          diskChart4.setOption(option4);


        }

      },
      error: function (error) {
        layer.msg('获取 服务器信息 数据失败，请稍后重试');
      }
    });


    // 初始化所有组件
    initCpuChart();
    initMemoryChart();
    initDiskChart1();
    initDiskChart2();
    initDiskChart3();
    initDiskChart4();
    initServerTable();
    initJvmTable();

    // 页面加载时获取数据
    // fetchServerData();
    // fetchJvmData();

    // 每秒请求一次 CPU 数据
    setInterval(function() {
      fetchCpuData();
      fetchMemData();
    }, 1000);
    // 刷新按钮绑定
    $('#refreshBtn').on('click', function () {
      fetchServerData();
      fetchJvmData();
      // updateMemoryData();
    });

    // 实时更新内存数据
    // setInterval(updateMemoryData, 5000);
  });
</script>

</body>
</html>